<template>
  <div class="_wz_dynamicVehicle">
    <div class="_wz_dynamicVehicle_left">
      <leftPage/>
    </div>
    <div class="_wz_dynamicVehicle_middle">
      <echarMap />
    </div>
    <div class="_wz_dynamicVehicle_right">
      <dynamicVehicleRight/>
    </div>

<!--    <div class="_wz_dynamicVehicle_middleOrRight">-->
<!--      <operations/>-->
<!--    </div>-->
<!--    <div class="_wz_dynamicVehicle_right">-->
<!--      <callPolice/>-->
<!--    </div>-->


  </div>
</template>
<script>
import leftPage from './dynamicVehicle/leftPage.vue'

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
import echarMap from '../dataBoard/dynamicVehicle/echarMap.vue'//地图
import operations from '../dataBoard/dynamicVehicle/operations.vue'//营运模块
import callPolice from '../dataBoard/dynamicVehicle/callPolice.vue'//报警模块
import dynamicVehicleRight from '../dataBoard/dynamicVehicle/dynamicVehicleRight.vue'//右侧模块

const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'dynamicVehicle',//组件名称
  components: {
    echarMap,//统计地图
    leftPage,//左边数据
    operations,//营运模块
    callPolice,//报警模块
    dynamicVehicleRight,//右侧模块
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({

    });


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_dynamicVehicle{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;

  ._wz_dynamicVehicle_left{
    width: 400px;
    height: 100%;

  }
  ._wz_dynamicVehicle_middle{
    width: calc(100% - 400px - 700px - 30px);
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  //._wz_dynamicVehicle_middleOrRight{
  //  width: 350px;
  //  height: 100%;
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-between;
  //
  //}
  ._wz_dynamicVehicle_right{
    width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }

  ._wz_dy_title{
    //background: url("@/assets/title.png") no-repeat;
    background: url("@/assets/title.png") no-repeat,
      linear-gradient(90deg,rgba(248,252,255,0)  0,rgba(248,252,255,0)  180px,#02193a  400px, #02193a 100%);
      //linear-gradient(90deg,rgba(248,252,255,0)  0,rgba(248,252,255,0)  180px,rgba(21,89,189,0.5)  400px, rgba(0,0,0,1) 100%);
    background-size: auto 100%;
    color: #fff;
    display: flex;
    height: 35px;
    align-items: center;
    padding: 0 0 0 30px;
    font-size: 16px;
    span{
      margin: 0 10px 0;
      cursor: pointer;
    }
  }
  ._wz_dy_div{
    height: calc(100% - 35px);

  }

  ._wz_title_select{
    text-shadow: 0 0 0.2em #ffff00, 0 0 0.2em #ffff00;
  }

  .ivu-carousel-list,.ivu-carousel-track{
    height: 100%;
  }
}
</style>
